<template>
  <div class="app-container">
    <el-scrollbar style="height: 100%;">
      <div class="echarts-item">
        <div class="echarts-title">
          {{ echartsData.ssh.title }}
        </div>
        <el-row :gutter="15" class="echarts-row" style="height: 430px;">
          <el-col :span="24">
            <echarts :echartsData="echartsData.ssh"></echarts>
          </el-col>
        </el-row>
      </div>


    </el-scrollbar>
  </div>
</template>

<script>
  import Echarts from '@/components/echarts/index'  //客服

  export default {
    mounted() {
      this.$store.commit('rdefaultActive', 'gzyc')
    },
    components: {
      Echarts,
    },
    data() {
      return {
        schema: [
          { name: 'YM', index: 0, text: '年月' },
          { name: 'GZCS', index: 1, text: '故障次数' },
          { name: 'GZSB', index: 2, text: '故障设备' },
          { name: 'ZL', index: 3, text: '质量' },
          { name: 'GL', index: 4, text: '管理' },
          { name: 'CQFY', index: 5, text: '超期服役' }
        ],
        itemStyle: {
          normal: {
            opacity: 0.8,
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowOffsetY: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        },
        echartsData: {
          ssh: {
           // title: "故障异常",
            legend: {
              y: 'top',
              data: ['东郊水厂', '北郊水厂', '管网部', '营销部'],
              textStyle: {
                fontSize: 16
              }
            },
            grid: {
              x: '10%',
              x2: 150,
              y: '18%',
              y2: '10%'
            },
            tooltip: {
              padding: 10,
              borderWidth: 1,
              formatter: function (obj) {
                var value = obj.value;
                return '<div style="border-bottom: 1px solid rgba(255,255,255,.8); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">'
                  + obj.seriesName + ' ' + value[0] + '：'
                  + '</div>'
                  + this.schema[1].text + '：' + value[1] + '<br>'
                  + this.schema[2].text + '：' + value[2] + '<br>'
                  + this.schema[3].text + '：' + value[3] + '<br>'
                  + this.schema[4].text + '：' + value[4] + '<br>'
                  + this.schema[5].text + '：' + value[5] + '<br>';
              }
            },
            xAxis: {
              type: 'value',
              name: '年月',
              nameGap: 16,
              nameTextStyle: {
                fontSize: 14
              },
              max: 13,
              splitLine: {
                show: false
              },
            },
            yAxis: {
              type: 'value',
              name: '故障次数',
              nameLocation: 'end',
              nameGap: 20,
              nameTextStyle: {
                fontSize: 16
              },
              splitLine: {
                show: false
              }
            },
            visualMap: [
              {
                left: 'right',
                top: '10%',
                dimension: 1,
                min: 0,
                max: 30,
                itemWidth: 30,
                itemHeight: 120,
                calculable: true,
                precision: 0.1,
                text: ['圆形大小：故障次数'],
                textGap: 30,

                inRange: {
                  symbolSize: [10, 70]
                },
                outOfRange: {
                  symbolSize: [10, 70],
                  color: ['rgba(255,255,255,.2)']
                },
                controller: {
                  inRange: {
                    color: ['#808080']
                  },
                },
                textStyle: {
                  color: '#f1f1f1'
                }
              },
              {
                left: 'right',
                bottom: '5%',
                dimension: 2,
                min: 0,
                max: 10,
                itemHeight: 120,
                calculable: true,
                precision: 0.1,
                text: ['明暗：故障设备'],
                textGap: 30,

                inRange: {
                  colorLightness: [1, 0.5]
                },
                outOfRange: {
                  color: ['rgba(255,255,255,.2)']
                },
                controller: {
                  inRange: {
                    color: ['#000']
                  },
                  outOfRange: {
                    color: ['#444']
                  }
                },
                textStyle: {
                  color: '#f1f1f1'
                }
              }
            ],
            series: [
              {
                name: '东郊水厂',
                type: 'scatter',
                itemStyle: this.itemStyle,
                data: [
                  [1, 17, 3, 6, 7, 1],
                  [2, 14, 3, 5, 2, 4],
                  [3, 15, 1, 9, 2, 3],
                  [4, 19, 2, 3, 9, 5],
                  [5, 24, 7, 9, 3, 5],
                  [6, 23, 6, 6, 6, 5],
                  [7, 14, 4, 3, 5, 2],
                  [8, 11, 4, 3, 1, 3],
                  [9, 28, 3, 7, 10, 8],
                  [10, 25, 6, 9, 8, 2],
                  [11, 21, 5, 7, 3, 6],
                  [12, 16, 7, 3, 0, 6],
                  [13, 13, 6, 1, 2, 4]
                ]
              },
              {
                name: '北郊水厂',
                type: 'scatter',
                itemStyle: this.itemStyle,
                data: [
                  [1, 23, 9, 8, 3, 3],
                  [2, 17, 3, 3, 9, 2],
                  [3, 24, 7, 4, 3, 10],
                  [4, 25, 9, 5, 6, 5],
                  [5, 22, 5, 10, 3, 4],
                  [6, 24, 4, 6, 8, 6],
                  [7, 19, 3, 6, 5, 5],
                  [8, 21, 8, 1, 5, 7],
                  [9, 21, 3, 9, 1, 8],
                  [10, 16, 5, 2, 3, 6],
                  [11, 31, 9, 9, 3, 10],
                  [12, 12, 5, 3, 3, 1],
                  [13, 10, 2, 1, 1, 6]
                ]
              },
              {
                name: '管网部',
                type: 'scatter',
                itemStyle: this.itemStyle,
                data: [
                  [1, 11, 1, 0, 5, 5],
                  [2, 18, 0, 3, 8, 7],
                  [3, 13, 0, 6, 7, 0],
                  [4, 30, 7, 5, 9, 9],
                  [5, 19, 4, 7, 5, 3],
                  [6, 21, 7, 5, 3, 6],
                  [7, 11, 6, 0, 5, 0],
                  [8, 24, 9, 6, 9, 0],
                  [9, 31, 8, 7, 8, 8],
                  [10, 22, 8, 5, 3, 6],
                  [11, 13, 4, 7, 1, 1],
                  [12, 12, 8, 3, 0, 1],
                  [13, 21, 7, 7, 2, 5]
                ]
              },
              {
                name: '营销部',
                type: 'scatter',
                itemStyle: this.itemStyle,
                data: [
                  [1, 17, 5, 0, 8, 4],
                  [2, 24, 8, 8, 4, 4],
                  [3, 26, 8, 2, 7, 9],
                  [4, 24, 2, 8, 4, 10],
                  [5, 31, 9, 9, 9, 4],
                  [6, 19, 7, 1, 9, 2],
                  [7, 14, 6, 5, 1, 2],
                  [8, 30, 7, 7, 6, 10],
                  [9, 20, 1, 8, 2, 9],
                  [10, 11, 3, 3, 4, 1],
                  [11, 19, 6, 1, 8, 4],
                  [12, 23, 7, 8, 7, 1],
                  [13, 27, 7, 5, 7, 8]
                ]
              }
            ]
          }
        }
      }
    },
    methods: {}
  }
</script>

<style scoped>

</style>
